<template>
  <div class="login-container">
    <a-row type="flex" justify="center" align="middle" class="login-row">
      <a-col :xs="24" :sm="16" :md="12" :lg="8" :xl="6">
        <a-card class="login-card" :bordered="false" hoverable>
          <div class="login-header">
            <h1 class="login-title">用户登录</h1>
            <p class="login-subtitle">欢迎回来，请登录您的账户</p>
          </div>

          <a-form :model="formState" @finish="handleLogin" class="login-form">
            <a-form-item name="username" :rules="[{ required: true, message: '请输入用户名!' }]">
              <a-input v-model:value="formState.username" placeholder="用户名" size="large">
                <template #prefix>
                  <UserOutlined class="input-icon" />
                </template>
              </a-input>
            </a-form-item>

            <a-form-item name="password" :rules="[{ required: true, message: '请输入密码!' }]">
              <a-input-password v-model:value="formState.password" placeholder="密码" size="large">
                <template #prefix>
                  <LockOutlined class="input-icon" />
                </template>
              </a-input-password>
            </a-form-item>

            <!-- 验证码输入 -->
            <a-form-item name="captcha" :rules="[{ required: true, message: '请输入验证码!' }]">
              <div class="captcha-input">
                <a-input
                  v-model:value="formState.captcha"
                  placeholder="验证码"
                  size="large"
                  style="flex: 1; margin-right: 10px"
                >
                  <template #prefix>
                    <SafetyOutlined class="input-icon" />
                  </template>
                </a-input>
                <a-button :disabled="countdown > 0" @click="getCaptcha" style="width: 120px">
                  {{ countdown > 0 ? `${countdown}秒后重试` : "获取验证码" }}
                </a-button>
              </div>
            </a-form-item>

            <a-form-item class="remember-forgot">
              <a-checkbox v-model:checked="rememberMe">记住我</a-checkbox>
              <a class="forgot-password">忘记密码?</a>
            </a-form-item>

            <a-form-item>
              <a-button type="primary" html-type="submit" block size="large" :loading="loading"> 登录 </a-button>
            </a-form-item>

            <!-- 第三方登录 -->
            <div class="third-party-login">
              <div class="divider">
                <span class="divider-line"></span>
                <span class="divider-text">或使用以下方式登录</span>
                <span class="divider-line"></span>
              </div>
              <div class="login-methods">
                <a-tooltip title="微信扫码登录">
                  <a-button shape="circle" class="login-method wechat" @click="showWechatQrCode">
                    <WechatOutlined />
                  </a-button>
                </a-tooltip>
                <a-tooltip title="支付宝扫码登录">
                  <a-button shape="circle" class="login-method alipay" @click="showAlipayQrCode">
                    <AlipayOutlined />
                  </a-button>
                </a-tooltip>
                <a-tooltip title="GitHub登录">
                  <a-button shape="circle" class="login-method github" @click="handleGithubLogin">
                    <GithubOutlined />
                  </a-button>
                </a-tooltip>
              </div>
            </div>

            <div class="login-footer">
              <span>还没有账号? </span>
              <a @click="handleRegister">立即注册</a>
            </div>
          </a-form>
        </a-card>
      </a-col>
    </a-row>

    <!-- 微信扫码登录模态框 -->
    <a-modal v-model:open="wechatModalVisible" title="微信扫码登录" :footer="null" :width="360" centered>
      <div class="qr-code-container">
        <img v-if="wechatQrCodeUrl" :src="wechatQrCodeUrl" alt="微信扫码登录" class="qr-code-img" />
        <p class="qr-code-tip">请使用微信扫描二维码登录</p>
      </div>
    </a-modal>

    <!-- 支付宝扫码登录模态框 -->
    <a-modal v-model:open="alipayModalVisible" title="支付宝扫码登录" :footer="null" :width="360" centered>
      <div class="qr-code-container">
        <img v-if="alipayQrCodeUrl" :src="alipayQrCodeUrl" alt="支付宝扫码登录" class="qr-code-img" />
        <p class="qr-code-tip">请使用支付宝扫描二维码登录</p>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onUnmounted } from "vue";
import {
  UserOutlined,
  LockOutlined,
  SafetyOutlined,
  WechatOutlined,
  AlipayOutlined,
  GithubOutlined,
} from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
import { useUserStore } from "@/store/user";
import { message } from "ant-design-vue";

interface FormState {
  username: string;
  password: string;
  captcha: string;
}

const formState = reactive<FormState>({
  username: "admin",
  password: "123456",
  captcha: "123456",
});

const rememberMe = ref(false);
const loading = ref(false);
const countdown = ref(0);
const countdownTimer = ref<NodeJS.Timeout | null>(null);
const router = useRouter();
const userStore = useUserStore();

// 第三方登录相关状态
const wechatModalVisible = ref(false);
const alipayModalVisible = ref(false);
const wechatQrCodeUrl = ref("");
const alipayQrCodeUrl = ref("");

// 获取验证码
const getCaptcha = () => {
  // 这里应该是调用API获取验证码
  message.success("验证码已发送");

  // 开始倒计时
  countdown.value = 60;
  countdownTimer.value = setInterval(() => {
    countdown.value--;
    if (countdown.value <= 0 && countdownTimer.value) {
      clearInterval(countdownTimer.value);
      countdownTimer.value = null;
    }
  }, 1000);
};

// 登录处理
const handleLogin = async () => {
  try {
    loading.value = true;
    await userStore.login(formState.username, formState.password, formState.captcha);
    message.success("登录成功");
    router.push("/home");
  } catch (error) {
    message.error("登录失败");
  } finally {
    loading.value = false;
  }
};

// 注册跳转
const handleRegister = () => {
  router.push("/register");
};

// 显示微信二维码
const showWechatQrCode = () => {
  // 实际项目中这里应该调用API获取微信登录二维码URL
  wechatQrCodeUrl.value = "https://example.com/wechat-qrcode.jpg";
  wechatModalVisible.value = true;

  // 模拟轮询检查扫码状态
  // 实际项目中应该使用WebSocket或定时API请求
};

// 显示支付宝二维码
const showAlipayQrCode = () => {
  // 实际项目中这里应该调用API获取支付宝登录二维码URL
  alipayQrCodeUrl.value = "https://example.com/alipay-qrcode.jpg";
  alipayModalVisible.value = true;

  // 模拟轮询检查扫码状态
  // 实际项目中应该使用WebSocket或定时API请求
};

// GitHub登录
const handleGithubLogin = () => {
  // 实际项目中这里应该跳转到GitHub OAuth授权页面
  window.location.href = "https://github.com/login/oauth/authorize?client_id=YOUR_CLIENT_ID";
};

// 组件卸载时清除定时器
onUnmounted(() => {
  if (countdownTimer.value) {
    clearInterval(countdownTimer.value);
  }
});
</script>

<style scoped lang="less">
.login-container {
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  background-image: url("../../assets/home-bg.jpg");
  background-size: cover;
  background-position: center;

  .login-row {
    height: 100%;
    padding: 0 16px;
  }

  .login-card {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    :deep(.ant-card-body) {
      padding: 40px;
    }
  }

  .login-header {
    text-align: center;
    margin-bottom: 30px;

    .login-title {
      font-size: 24px;
      font-weight: 500;
      color: #333;
      margin-bottom: 8px;
    }

    .login-subtitle {
      color: #888;
      font-size: 14px;
      margin: 0;
    }
  }

  .login-form {
    .input-icon {
      color: rgba(0, 0, 0, 0.25);
    }

    .captcha-input {
      display: flex;
      align-items: center;
    }

    .remember-forgot {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .forgot-password {
        font-size: 14px;
      }
    }

    .ant-btn {
      height: 40px;
      font-weight: 500;
    }
  }

  .third-party-login {
    margin-top: 20px;

    .divider {
      display: flex;
      align-items: center;
      margin-bottom: 20px;

      .divider-line {
        flex: 1;
        height: 1px;
        background-color: #f0f0f0;
      }

      .divider-text {
        padding: 0 10px;
        color: #888;
        font-size: 12px;
      }
    }

    .login-methods {
      display: flex;
      justify-content: center;
      gap: 16px;

      .login-method {
        width: 40px;
        height: 40px;
        font-size: 18px;

        &.wechat {
          color: #07c160;
          border-color: #07c160;
        }

        &.alipay {
          color: #1677ff;
          border-color: #1677ff;
        }

        &.github {
          color: #333;
          border-color: #333;
        }

        &:hover {
          opacity: 0.8;
        }
      }
    }
  }

  .login-footer {
    text-align: center;
    margin-top: 16px;
    font-size: 14px;
    color: #666;

    a {
      color: #1890ff;
    }
  }

  .qr-code-container {
    text-align: center;
    padding: 10px 0;

    .qr-code-img {
      width: 200px;
      height: 200px;
      margin: 0 auto;
      display: block;
    }

    .qr-code-tip {
      margin-top: 15px;
      color: #666;
    }
  }
}
</style>
